<template>
  <div style="width: 100%; height:545px" ref="BarChart" v-on-echart-resize></div>
</template>
<script>
  import "@/utils/chart.resize.js";
  export default {
    name: "index",
    props: {
      data_x: {
        type: Array,
        default: function () {
          return [];
        },
      },
      data_y: {
        type: Array,
        default: function () {
          return [];
        },
      },
      title: {
        type: String,
        default: function () {
          return '';
        },
      },
    },

    watch: {
      data_x(){
        this.initChart()
      },
      data_y(){
        this.initChart()
      }
    },

    methods:{
      initChart(){
        let myChart = this.$echarts.init(this.$refs.BarChart);
        let option;
        option = {
          xAxis: {
            type: 'category',
            data: this.data_x
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.data_y,
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },

    mounted() {
      this.initChart()
    }
  }
</script>

<style scoped>

</style>
